<template>
  <div class="block-detail">
    <div v-for="group in groupedFields" :key="group.title" class="field-group">
      <h3 v-if="group.title" class="group-title">{{ group.title }}</h3>

      <div class="field-grid">
        <div
            v-for="item in group.fields"
            :key="item.key"
            :class="['field-item', { 'full-width': item.type === 'textarea' }]"
        >
          <div class="label">{{ item.label }}：</div>
          <div class="value" v-if="mode === 'view'">
            <slot :name="item.key">
              {{ formatValue(data[item.key], item.format) }}
            </slot>
          </div>

          <div v-else>
            <component
                :is="getFormComponent(item)"
                v-model="formData[item.key]"
                v-bind="item.props"
                :rows="item.type === 'textarea' ? 3 : undefined"
                style="width: 100%;"
            />
          </div>
        </div>
      </div>
    </div>

    <div v-if="mode !== 'view'" class="form-actions">
      <a-button type="primary" @click="handleSubmit">提交</a-button>
      <a-button @click="$emit('cancel')">取消</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlockDetail',
  props: {
    mode: { type: String, default: 'view' }, // view | edit | create
    data: Object,
    config: Array,
  },
  data() {
    return {
      formData: {},
    }
  },
  watch: {
    data: {
      immediate: true,
      handler(val) {
        this.formData = { ...val }
      },
    },
  },
  computed: {
    groupedFields() {
      const map = {}
      const groups = []
      this.config.forEach(field => {
        const group = field.group || ''
        if (!map[group]) {
          map[group] = { title: group, fields: [] }
          groups.push(map[group])
        }
        map[group].fields.push(field)
      })
      return groups
    },
  },
  methods: {
    formatValue(val, format) {
      if (!format) return val ?? '-'
      if (format === 'date') return new Date(val).toLocaleDateString()
      if (typeof format === 'function') return format(val)
      return val
    },
    getFormComponent(item) {
      const map = {
        text: 'a-input',
        select: 'a-select',
        date: 'a-date-picker',
        textarea: 'a-input-textarea',
      }
      return map[item.type] || 'a-input'
    },
    handleSubmit() {
      this.$emit('submit', this.formData)
    },
  },
}
</script>

<style scoped>
.block-detail {
  padding: 24px;
}
.field-group {
  margin-bottom: 32px;
}
.group-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
.field-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.field-item {
  display: flex;
  flex-direction: column;
  width: calc(33% - 16px); /* 三列布局 */
}
.field-item.full-width {
  width: 100%;
}
.label {
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}
.value {
  color: #555;
}
.form-actions {
  margin-top: 24px;
}
</style>
